<style scoped lang="less">
.choose_man {
  .main_div {
    margin: 5px 0;
    padding: 0 5px;
  }
  .content {
    border: 1px solid rgba(222, 222, 222, 1);
  }
}
</style>
<template>
  <div>
    <Modal
      :value="isShowMan==open_type"
      :mask-closable="false"
      :title="title"
      @on-ok="ok"
      @on-cancel="cancel"
      class="choose_man"
    >
      <RadioGroup v-model="type">
        <Radio label="1">
          <span>本线路人员</span>
        </Radio>
        <Radio label="2">
          <span>其他线路人员</span>
        </Radio>
        <div class="content">
          <Row :gutter="16" class="main_div">
            <Col span="8" v-show="type=='2'">
              <poptip
                v-model="visible"
                placement="bottom"
                style="{max-height:'400px'}"
                class="choosecar_pop"
              >
                <Input
                  v-model="car"
                  suffix="ios-arrow-down"
                  placeholder="请选择线路"
                  width="inputWidth"
                  clearable
                  readonly="readonly"
                  :style="formStyle"
                ></Input>
                <!-- <div slot="title"></div> -->
                <div slot="content">
                  <Tree :data="treeData" empty-text @on-select-change="selectTree"></Tree>
                </div>
              </poptip>
            </Col>

            <!-- 搜索 -->
            <Col span="10">
              <Input search enter-button="搜索" placeholder="请输入姓名或工号"/>
            </Col>
          </Row>
          <!-- 车辆表格 -->
          <Table border :columns="carColumns" :data="manList" :loading="manLoading" :height="400"
            :width="490"></Table>
        </div>
      </RadioGroup>
      <div slot="footer">
        <Button type="text" size="large" @click="cancel">取消</Button>
        <Button type="primary" size="large" @click="ok">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import commonService from "../../../utils/services/commonService";
import util from "../../../utils/util";
export default {
  props: {
    open_type: {
      type: String,
      default: "add"
    }
  },
  data() {
    return {
      treeData: [],
      type: "1",
      car: "",
      driver:"",
      visible: false,
      carColumns: [
        {
          title: "序号",
          render: (h, r) => {
            return h("span", r.index + 1);
          }
        },
        {
          title: "人员",
          key:'name',
        },
        {
          title: "所属组织",
          key:"orgName"
        },
        {
          title: "操作",
           render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.manType=="1"?this.$emit('callBack',params.row,'driver'):this.$emit('callBack',params.row,'steward')
                      this.$store.dispatch("attendance/setItem_act", {key: "isShowMan",value: false});
                    }
                  }
                },
                "选择"
              )
            ]);
           }
        }
      ]
    };
  },
  beforeCreate() {
    ///获取组织树
    commonService.getTreeList().then(data => {
      this.treeData = util.transformTree(data.data);
    });
  },
  //组件业务处理
  methods: {
    selectTree: function(val) {
      var item = val[0];
      if (item.type === 4) {
      }
      return false;
    },
    ok: function() {
      this.$store.dispatch("attendance/setItem_act", {
        key: "isShowMan",
        value: false
      });
      this.init();
    },
    cancel: function() {
      this.$store.dispatch("attendance/setItem_act", {
        key: "isShowMan",
        value: false
      });
      //初始化
      this.init();
    },
    init: function() {
      this.$store.dispatch("attendance/setItem_act", {
        key: "manType",
        value: "1"
      });
      this.type = "1";
    }
  },
  computed: {
    ...mapState({
      //这里的...是超引用，ES6的语法，意思是state里有多少属性值我可以在这里放多少属性值
      isShowMan: state => state.attendance.isShowMan, //注意这些与上面的区别就是state.footerStatus,
      manType: state => state.attendance.manType,
      title: state => {
        return state.attendance.manType === "1" ? "选择驾驶员" : "选择乘务员";
      },
      manLoading: state => state.attendance.manLoading,
      manList: state => state.attendance.manList,
      
      //里面定义的showFooter是指footerStatus.js里state的showFooter
      //你也可以用下面的mapGetters来获取isShow的值，貌似下面的更简洁
      /*...mapGetters('footerStatus',{ //footerStatus指的是modules文件夹下的footerStatus.js模块
         isShow:'isShow' //第一个isShow是我自定义的只要对应template里v-if="isShow"就行，
                         //第二个isShow是对应的footerStatus.js里的getters里的isShow
      })*/
    })
  }
};
</script>


